<template>
  <template v-for="menu in typeMenus">
    <el-sub-menu :index="menu.path" v-if="menu.children.length > 0">
      <template #title>
        <el-icon v-if="menu.icon"> <component :is="menu.icon" /> </el-icon>
        <span v-if="!isCollapsed"> {{ menu.menuName }}</span>
      </template>
      <submenu :menus="menu.children"></submenu>
    </el-sub-menu>
    <el-menu-item :index="menu.path" v-else>
      <el-icon v-if="menu.icon"> <component :is="menu.icon" /> </el-icon>
      <template #title>{{ menu.menuName }}</template>
    </el-menu-item>
  </template>
</template>

<script lang="ts">
import { defineComponent, inject } from "vue";
import { IMenuModel } from "@/typings";

export default defineComponent({
  name: "submenu",
  props: ["menus"],
  setup(props, context) {
    let typeMenus = props.menus as IMenuModel[];
    let isCollapsed = inject("isCollapsed");
    return { typeMenus, isCollapsed };
  },
});
</script>

<style scoped></style>
